// 全局样式变量
$primary-color: #007AFF;
$secondary-color: #34C759;
$warning-color: #FF9500;
$error-color: #FF3B30;
$info-color: #8E8E93;

$background-color: #F2F2F7;
$card-background: #FFFFFF;
$text-primary: #000000;
$text-secondary: #8E8E93;
$text-tertiary: #C7C7CC;

// 字体大小
$font-size-s: 12rpx;
$font-size-xs: 24rpx;
$font-size-sm: 28rpx;
$font-size-base: 32rpx;
$font-size-lg: 36rpx;
$font-size-xl: 40rpx;

// 边距
$spacing-xs: 10rpx;
$spacing-sm: 20rpx;
$spacing-base: 30rpx;
$spacing-lg: 40rpx;
$spacing-xl: 50rpx;

// 间距
$spacing-md: 24rpx;
$spacing-md-lg: 32rpx;
$spacing-md-xl: 40rpx;
$spacing-md-2xl: 48rpx;
$spacing-md-3xl: 56rpx;

$border-color: #E5E5E5;

// 圆角
$border-radius-sm: 8rpx;
$border-radius-base: 12rpx;
$border-radius-lg: 20rpx;

// 阴影
$box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.05);

// 通用样式类
.flex {
  display: flex;
}

.flex-column {
  flex-direction: column;
}

.flex-row {
  flex-direction: row;
}

.justify-center {
  justify-content: center;
}

.align-center {
  align-items: center;
}

.text-center {
  text-align: center;
}

.m-xs {
  margin: $spacing-xs;
}

.m-sm {
  margin: $spacing-sm;
}

.m-base {
  margin: $spacing-base;
}

.m-lg {
  margin: $spacing-lg;
}

.m-xl {
  margin: $spacing-xl;
}

.p-xs {
  padding: $spacing-xs;
}

.p-sm {
  padding: $spacing-sm;
}

.p-base {
  padding: $spacing-base;
}

.p-lg {
  padding: $spacing-lg;
}

.p-xl {
  padding: $spacing-xl;
}